<template>
  <div class="light-container">
    <div class="light-header">
      <div class="light-top-left">
        <div class="light-top-item" :class="{'active': currentView == item.id}" v-for="item in buildingData" @click="handleChangeBuilding(item)" :key="item.id">{{ item.name }}</div>
      </div>
      <!-- <div class="light-top-right">
        <el-select v-model="currentFloorView" placeholder="请选择楼层" @change="handleChangeFloor">
            <el-option
              v-for="item in floorData"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
        </el-select>
      </div> -->
      <div class="light-top-right">
        <el-tooltip class="tooltip-wrap" placement="bottom">
          <div slot="content">
            温馨提示：<br/>
            绿色代表床位已入住人<br/>
            灰色代表床位未入住人<br/>
            蓝色代表床位在床<br/>
            黄色代表床位尿湿<br/>
           </div>
          <img src="@/assets/images/bj-icon2.png" >
        </el-tooltip>
        <div class="light-top-item" :class="{'active': bed_type == ''}" @click="changeTabRoom({id: ''})">全部</div>
        <div class="light-top-item" v-for="item in bedType" :key="item.id" :class="{'active': bed_type == item.id}" @click="changeTabRoom(item)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="light-content">
      <div class="light-left-cont">
        <div v-for="item in floorData" :key="item.id" class="light-item" :class="{'active': currentFloorView == item.id}" @click="handleChangeFloor(item)">
          {{ item.name }}
        </div>
      </div>
      <div class="zsx-wrap">
        <div class="room-content" v-for="item in roomList" :key="item.id" v-if="item.is_cd || item.is_sm">
          <div class="room-header">
            <img src="@/assets/home/home-icon.png" />
            {{ item.room_code }}房间
          </div>
          <div class="care-wrap">
            <div class="care-list" v-for="ite in item.bed_list" :key="ite.id" v-if="ite.is_cd || ite.is_sm">
            	<div class="care-item" @click="handleCardInfo(ite, item)">
            		<div class="care-header" :class="{'colorType0': ite.e_id, 'colorType1':ite.on_bed == 1, 'colorType2': ite.is_wet}">
            			<span>{{ite.bed_code}}床位</span>
                  <span v-if="ite.offline == 0 && ite.on_bed == 100" style="font-size: 14px;">检测带未安装</span>
                  <!-- offline 0是在线  1是离线 -->
                  <span v-if="ite.offline != 0" style="font-size: 14px;">{{ ite.offline == 1 ? '设备已离线' : '未绑定设备' }}</span>
            			<span>{{ite.elder && ite.elder.name || '床位空闲'}}</span>
            		</div>
            		<div class="care-content">
            			<div class="care-room">
            				<div class="care-room-name">年龄：{{ite.elder && ite.elder.age || '暂无'}}</div>
            				<div class="care-room-right">
            					性别：{{ite.elder && (ite.elder.sex == 1 ? "男" : ite.elder.sex == 2 ? "女" : "暂无") || "暂无"}}
            				</div>
            			</div>
                  <div class="care-room" v-if="ite.is_sm">
                  	<div class="care-room-name">心率：<span>{{ite.xinlv}}</span></div>
                  	<div class="care-room-right">
                  		呼吸：<span>{{ite.huxi}}</span>
                  	</div>
                  </div>
                  <div class="care-room" v-if="ite.is_cd">
                  	<div>在床：<span :class="{'care-cd-color': ite.on_bed == 1}">{{ite.on_bed == 1 ? '是' : '否'}}</span></div>
                  	<div>
                  		尿湿：<span :class="{'care-sm-color': ite.is_wet}">{{ite.is_wet ? '是' : '否'}}</span>
                  	</div>
                  </div>
            		</div>
            	</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="信息面板"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <div class="info-title">基本信息</div>
        <div class="basicInfo">
          <div class="item">姓名</div>
          <div class="item">简书成</div>
          <div class="item">性别</div>
          <div class="item">男</div>
          <div class="item">年龄</div>
          <div class="item">68</div>
          <div class="item">生日</div>
          <div class="item">1952-08-06</div>
          <div class="item">身份证</div>
          <div class="item">411503195208060971</div>
          <div class="item">婚姻状态</div>
          <div class="item">已婚</div>
          <div class="item">联系方式</div>
          <div class="item">138 4567 7890</div>
          <div class="item">宗教信仰</div>
          <div class="item">无宗教信仰</div>
          <div class="item">经济来源</div>
          <div class="item">子女赡养</div>
          <div class="item">老人类型</div>
          <div class="item">低保老人</div>
          <div class="item">医保类型</div>
          <div class="item">城镇居民医疗保险</div>
          <div class="item">医保卡号</div>
          <div class="item">0987847975</div>
          <div class="item">户籍地址</div>
          <div class="item item-spcial-1">
            河南省信阳市平桥区恒大名都1幢1019室
          </div>
          <div class="item">居住地址</div>
          <div class="item item-spcial-2">
            河南省信阳市平桥区恒大名都1幢1019室
          </div>
        </div>
        <div class="info-title">健康状况</div>
        <div class="basicInfo healthInfo">
          <div class="item">体温</div>
          <div class="item">36.8℃</div>
          <div class="item">血压</div>
          <div class="item">160mmHg，100mmHg</div>
          <div class="item">康复训练</div>
          <div class="item">无</div>
          <div class="item">疾病</div>
          <div class="item">无</div>
          <div class="item">介护等级</div>
          <div class="item">介助型</div>
          <div class="item">听力</div>
          <div class="item">正常</div>
          <div class="item">视力</div>
          <div class="item">正常</div>
          <div class="item">体重</div>
          <div class="item">68kg</div>
          <div class="item">传染病</div>
          <div class="item">无</div>
          <div class="item">疾病史</div>
          <div class="item">高血压、糖尿病</div>
          <div class="item">遗传病</div>
          <div class="item">无</div>
          <div class="item">过敏史</div>
          <div class="item">无</div>
        </div>
        <div class="info-title">床位信息</div>
        <div class="basicInfo bedInfo">
          <div class="item">床位编号</div>
          <div class="item">101房01床</div>
          <div class="item">护理类型</div>
          <div class="item">介助型</div>
          <div class="item">入住时间</div>
          <div class="item">2020-07-01</div>
          <div class="item">离住时间</div>
          <div class="item">2020-12-01</div>
          <div class="item">床位价格</div>
          <div class="item">500元/月</div>
          <div class="item">餐费价格</div>
          <div class="item">800元/月</div>
          <div class="item">护理价格</div>
          <div class="item">1500元/月</div>
          <div class="item">床位押金</div>
          <div class="item">1000元</div>
          <div class="item">设备编号</div>
          <div class="item">JZ1090908786785</div>
          <div class="item">护理人员</div>
          <div class="item">张玲玲</div>
          <div class="item">预交金额</div>
          <div class="item">10000.00元</div>
          <div class="item">预警金额</div>
          <div class="item">500.00元</div>
        </div>
        <div class="info-title">家属信息</div>
        <div class="basicInfo familyInfo">
          <div class="item">姓名</div>
          <div class="item">简书成</div>
          <div class="item">性别</div>
          <div class="item">男</div>
          <div class="item">与老人关系</div>
          <div class="item">子女</div>
          <div class="item">联系方式</div>
          <div class="item">138 7869 8729</div>
          <div class="item">身份证</div>
          <div class="item item-spcial-1">411503195208060971</div>
          <div class="item">居住地址</div>
          <div class="item item-spcial-2">
            河南省信阳市平桥区恒大名都1幢1019室
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="检测带设备日志"
      :visible.sync="dialogChartVisible"
      width="80%"
      :before-close="closeChartDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div style="margin-bottom: 20px; padding-left: 20px;">
        <span>选择时间：</span>
        <el-date-picker
          v-model="value"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择日期"
          @change="handleChangeTime"
         >
        </el-date-picker>
        <span style="margin-left: 20px;">睡眠时间：{{timeOld}}小时</span>
      </div>
      <div style="display: flex;">
        <v-chart
          autoresize
          :option="chart"
          style="width: 50%; height: 500px;"
        />
        <v-chart
          autoresize
          :option="chart1"
          style="width: 50%; height: 500px;"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { mapGetters } from "vuex"
  import { tenBitTimestamp } from '@/utils';
  import { getBuilding, getFloor } from "@/api/building";
  import { getList } from "@/api/bedList";
  import { getBedType } from "@/api/bedType";
  import { getsmlog, getsmtime } from "@/api/device.js";
  import { parseTime } from "@/utils";
  import * as echarts from "echarts";
  import VChart from 'vue-echarts'
  import { use } from "echarts/core";
  import { CanvasRenderer } from "echarts/renderers";
  import { PieChart } from "echarts/charts";
  import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
  } from "echarts/components";
  use([
    CanvasRenderer,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent
  ]);
  export default {
    name: "LightManage",
    components: {
      VChart
    },
    data() {
      return {
        //楼栋列表信息
        buildingData: [],
        //楼层列表信息
        floorData: [],
        //房间列表信息
        roomList: [],
        //目前的楼栋
        currentView: 0,
        //目前的楼层
        currentFloorView: 0,
        dialogVisible: false,
        //接口切换使用类型
        bed_type: "",
        bedType: [],
        //楼层id
        floor_id: "",
        dialogChartVisible: false,
        //设备日志显示
        chart: {
          title: {
            text: '老人心率呼吸日志',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              animation: false
            }
          },
          legend: {
            data: ['心率', '呼吸'],
            left: 10
          },
          toolbox: {
            feature: {
              // dataZoom: {
              //   yAxisIndex: 'none'
              // },
              // restore: {},
              saveAsImage: {}
            }
          },
          axisPointer: {
            link: [
              {
                xAxisIndex: 'all'
              }
            ]
          },
          dataZoom: [
            {
              show: true,
              realtime: true,
              start: 30,
              end: 70,
              xAxisIndex: [0, 1]
            },
            {
              type: 'inside',
              realtime: true,
              start: 30,
              end: 70,
              xAxisIndex: [0, 1]
            }
          ],
          grid: [
            {
              left: 60,
              right: 50,
              height: '35%'
            },
            {
              left: 60,
              right: 50,
              top: '55%',
              height: '35%'
            }
          ],
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLine: { onZero: true },
              data: []
            },
            {
              gridIndex: 1,
              type: 'category',
              boundaryGap: false,
              axisLine: { onZero: true },
              data: [],
              position: 'top'
            }
          ],
          yAxis: [
            {
              name: '心率',
              type: 'value',
              max: 120
            },
            {
              gridIndex: 1,
              name: '呼吸',
              type: 'value',
              inverse: true
            }
          ],
          series: [
            {
              name: '心率',
              type: 'line',
              symbolSize: 8,
              // prettier-ignore
              data: []
            },
            {
              name: '呼吸',
              type: 'line',
              xAxisIndex: 1,
              yAxisIndex: 1,
              symbolSize: 8,
              // prettier-ignore
              data: []
            }
          ]
        },
        // 日志参数
        params: {},
        // 时间
        value: "",
        timeOld: "",
        chart1: {
          title: {
              text: '老人睡眠质量检测',
              left: 'center'
          },
          tooltip: {
             trigger: "axis"
          },
          legend: {
            itemWidth:15,
            itemHeight:15,
            left: 10,
            data:['深睡', '浅睡', '清醒'],
          },
          xAxis: {
              data: ["睡眠质量"],
          },
          yAxis: {
            name: "h",
          },
          series: [{
              name: '深睡',
              type: 'bar',
              stack:'睡眠情况',
              data: [],
              barWidth: 50,
              itemStyle:{
                   normal:{color:"#0C5290"},
              }
          },{
              name: '浅睡',
              type: 'bar',
              stack:'睡眠情况',
              barWidth: 50,
              data: [],
              itemStyle:{
                   normal:{color:"#4DA9F2"},
              }
          },
          {
              name: '清醒',
              type: 'bar',
              barWidth: 50,
              stack:'睡眠情况',
              data: [],
              itemStyle:{
                normal:{color:"#F20E7B"},
              }
          }]
        }
      };
    },
    computed: {
      ...mapGetters({
        adminType: "user/type",
        ysxAreaList: "websocket/ysxAreaList",
        ysxLightList: "websocket/ysxLightList"
      }),
      webSocketMsg() {
        return this.$store.state.websocket.webSocketMsg
      }
    },
    created() {

    },
    beforeDestroy() {},
    watch:{
        webSocketMsg:{
          handler: function(newVal) {
            this.init(newVal, this)
          }
        }
    },
    mounted() {
      this.getBuildingData();
      this.getBedType();
    },
    methods: {
      //根据床位查看老人呼吸心率
      getsmlog() {
        getsmlog(this.params).then(res => {
          let data = res.data;
          let timedata = [];
          let xinlv = [];
          let huxi = [];
          const resdata = data.filter(item => (item.status != 1 && item.status != 100 && ((item.xinlv != 0 && item.huxi != 0) || (item.xinlv == 0 && item.huxi == 0)) && item.timelong > 5))
          resdata.forEach((item, index) => {
            timedata.push(parseTime(item.create_time))
            xinlv.push(Number(item.xinlv))
            huxi.push(Number(item.huxi))
          })

          this.chart.xAxis[0].data = timedata;
          this.chart.xAxis[1].data = timedata;
          this.chart.series[0].data = xinlv;
          this.chart.series[1].data = huxi;
        })
      },
      //根据床位查看老人呼吸心率
      getsmtimes() {
        getsmtime(this.params).then(res => {
          let data = res.data;
          this.$set(this.chart1.series[0], "data", [((Number(data[0]) + Number(data[3]) + Number(data[5])) / 60 / 60).toFixed(2)])
          this.$set(this.chart1.series[1], "data", [(Number(data[2]) / 60 / 60).toFixed(2)])
          this.$set(this.chart1.series[2], "data", [(Number(data[1]) / 60 / 60).toFixed(2)])
          // this.chart1.series[0].data = [((Number(data[0]) + Number(data[3]) + Number(data[5])) / 60 / 60).toFixed(2)];
          // this.chart1.series[1].data = [(Number(data[2]) / 60 / 60).toFixed(2)];
          // this.chart1.series[2].data = [(Number(data[1]) / 60 / 60).toFixed(2)];
          this.timeOld = (((Number(data[0]) + Number(data[3]) + Number(data[5])) / 60 / 60).toFixed(2) * 1 + (Number(data[2]) / 60 / 60).toFixed(2) * 1).toFixed(2);
        })
      },
      //查看老人信息
      handleCardInfo(item, info) {
        this.dialogChartVisible = true;
        this.params = {
          start: parseTime(new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime() - 6*60*60*1000),
          end: parseTime(new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime() + 6*60*60*1000),
          bed_id: item.id
        }
        let oldName = info.room_code + "房间" + item.bed_code + "床位" + (item.elder && item.elder.name || "");
        this.chart.title.text = oldName + "-老人心率呼吸日志";
        this.chart1.title.text = oldName + "-老人睡眠质量检测";
        // this.value = [parseTime(new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime() - 6*60*60*1000), parseTime(new Date())]
        this.value = parseTime(new Date());
        this.getsmtimes();
        this.getsmlog();
      },
      handleChangeTime(value) {
        // this.params.start = value[0];
        // this.params.end = value[1];
        console.log(value)
        this.params.start = parseTime(new Date(new Date(new Date(value).toLocaleDateString()).getTime()).getTime() - 6*60*60*1000);
        this.params.end = parseTime(new Date(new Date(new Date(value).toLocaleDateString()).getTime()).getTime() + 6*60*60*1000);
        this.getsmlog()
        this.getsmtimes();
      },
      //根据床位切换房间类型
      changeTabRoom(item) {
        this.bed_type = item.id;
        this.getTableData(this.floor_id)
      },
      //获取床位类型
      getBedType() {
        getBedType("get").then(res => {
          this.bedType = res.data.list;
        })
      },
      init(res, _that) {
        let result = JSON.parse(res)
        if(!result){
          return false
        }
        if(result.route == 'device_onoff') {
          let data = result.data;
          if(data.type == 11) {
            _that.roomList.forEach((ite, idx) => {
              ite.bed_list.forEach((m, n) => {
                m.bed_device.forEach((x, y) => {
                  if(x.code == data.device_id) {
                    //在床
                    if(data.status[1].value == 0) {
                      _that.$set(_that.roomList[idx].bed_list[n], 'on_bed', 1)
                    } else { //离床
                      _that.$set(_that.roomList[idx].bed_list[n], 'on_bed', 0)
                    }

                    //未尿床
                    if(data.status[2].value == 0) {
                      _that.$set(_that.roomList[idx].bed_list[n], 'is_wet', 0)
                    } else {
                      //尿湿
                      _that.$set(_that.roomList[idx].bed_list[n], 'is_wet', 1)
                    }
                  }
                })
              })
            })
          }
          if(data.type == 12) {
            _that.roomList.forEach((ite, idx) => {
              ite.bed_list.forEach((m, n) => {
                m.bed_device.forEach((x, y) => {
                  if(x.code == data.device_id) {
                    //心率
                    _that.$set(_that.roomList[idx].bed_list[n], 'xinlv', data.status[5].value)
                    //呼吸
                    _that.$set(_that.roomList[idx].bed_list[n], 'huxi', data.status[6].value)
                    //未尿床
                    if(data.status[2].value == 0) {
                      _that.$set(_that.roomList[idx].bed_list[n], 'is_wet', 0)
                    } else { //尿湿
                      _that.$set(_that.roomList[idx].bed_list[n], 'is_wet', 1)
                    }

                    // offline 0 在线  1离线
                    if(data.offline == '0') {
                      _that.$set(_that.roomList[idx].bed_list[n], 'offline', 0)
                    } else {
                      _that.$set(_that.roomList[idx].bed_list[n], 'offline', 1)
                    }

                    if(data.status[4].value == 1) {//离床
                      _that.$set(_that.roomList[idx].bed_list[n], 'on_bed', 0)
                    } else if(data.status[4].value != 100) { //在床
                      _that.$set(_that.roomList[idx].bed_list[n], 'on_bed', 1)
                    } else {
                      _that.$set(_that.roomList[idx].bed_list[n], 'on_bed', 100)
                    }
                  }
                })
              })
            })
          }
        }
      },

      closeDialog() {
        this.dialogVisible = false;
      },
      closeChartDialog() {
        this.dialogChartVisible = false;
      },
      //切换楼栋
      handleChangeBuilding(item) {
        let params = {
          building_id: item.id,
        };
        this.currentView = item.id;
        if (params.building_id) this.getFloorData(params);
      },
      //切换楼层
      handleChangeFloor(item) {
        let floor_id = item.id;
        this.currentFloorView = item.id;
        if (floor_id) this.getTableData(floor_id);
      },
      //获取楼栋信息
      getBuildingData(data) {
        getBuilding("get", data).then((resp) => {
          if (resp.code === 200) {
            this.buildingData = resp?.data?.list.reverse() || [];
            this.building_id = this.buildingData[0].id;
            this.currentView = this.buildingData[0].id;
            this.activename = this.buildingData[0].name;
            let params = {
              building_id: this.building_id,
            };
            if (this.building_id) this.getFloorData(params);
          }
        });
      },
      //获取楼层信息
      getFloorData(data) {
        getFloor("get", data).then((resp) => {
          if (resp.code === 200) {
            this.floorData = resp?.data?.list || [];
            if (resp.data.list.length == 0) return;
            this.floor_id = this.floorData[0].id;
            this.currentFloorView = this.floorData[0].id;
            if (this.floor_id) this.getTableData(this.floor_id);
          }
        });
      },
      //获取房间信息
      getTableData(floor_id) {
        this.selectForm = {
          page_size: 120,
          floor_id,
          bed_type: this.bed_type
        };
        getList("get", this.selectForm).then((resp) => {
          if (resp.code === 200) {
            const data = resp.data.list;
            data.forEach(item => {
              item.is_cd = 0;
              item.is_sm = 0;
              item.bed_list.forEach(ite => {
                if(ite.is_cd) {
                  item.is_cd = 1;
                }
                if(ite.is_sm) {
                  item.is_sm = 1;
                }
                if(ite.id4 == 100) {
                  ite.on_bed = 100;
                }
                ite.offline = 2;
                ite.bed_device.length && ite.bed_device.forEach((bed) => {
                  if(bed.type == 12 || bed.type == 11) {
                    // offline 0 在线  1离线
                    if(bed.offline == '0') {
                      ite.offline = 0;
                    } else {
                      ite.offline = 1;
                      ite.on_bed = 0;
                      ite.is_wet = 0;
                    }
                  }
                })
              })
            })
            this.roomList = data;
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .tooltip-wrap{
    width: 30px;
    float: left;
  }
  .light-container{
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    padding: 20px 50px !important;
    .light-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .light-top-left{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .light-top-item{
          cursor: pointer;
          font-size: 16px;
          font-weight: bold;
          line-height: 16px;
          color: #333333;
          padding-bottom: 3px;
          border-bottom: 2px solid #ffffff;
          &:hover{
            border-bottom: 2px solid #487EEA;
            color: #487EEA;
          }
          &:nth-child(n+2) {
            margin-left: 40px;
          }
        }
        .active{
          color: #487EEA;
          border-bottom: 2px solid #487EEA;
        }
      }
      .light-top-right{
        .light-top-item{
          padding: 8px 8px;
          font-size: 16px;
          color: #ffffff;
          float: left;
          border: none;
          outline: none;
          border-radius: 2px;
          cursor: pointer;
          background: #999999;
          border-radius: 2px;
          &:hover{
            background: #487EEA;
          }
          &:nth-child(n+2) {
            margin-left: 10px;
          }
        }
        .active{
          background: #487EEA;
        }
      }
    }
    .light-content{
      overflow: hidden;
      margin-top: 15px;
      .light-left-cont{
        margin-top: 10px;
        float: left;
        width: 129px;
        // min-height: 400px;
        position: relative;
        z-index: 1;
        .light-item{
          width: 129px;
          height: 40px;
          cursor: pointer;
          text-align: center;
          line-height: 40px;
          color: #ffffff;
          background: #999999;
          border-radius: 2px;
          &:hover{
            background: #487EEA;
          }
          &:nth-child(n+2) {
            margin-top: 15px;
          }
        }
        .active{
          background: #487EEA;
        }
      }
    }
    .room-content{
      zoom: 1;
      &:nth-child(n+2) {
        margin-top: 20px;
      }
      &::after{
        content: "";
        display: block;
        clear: both;
        opacity: 0;
        visibility: hidden;
      }
      .room-header{
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 20px;
        color: #333333;
        padding-left: 20px;
        background-color: #F2F2F2;
        box-sizing: border-box;
        img{
          margin-right: 5px;
          width: 18px;
          height: 19px;
        }
      }
      .care-wrap{
        display: flex;
        justify-content: flex-start;
        overflow-x: auto;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        &::after{
          content: "";
          display: block;
          clear: both;
          opacity: 0;
          visibility: hidden;
        }
      }
    }
    .zsx-wrap{
    	margin-top: 10px;
      padding-left: 160px;
      .m-20{
        margin: 10px 0;
      }
    }
    .care-list {
    	border-radius: 10px;
      margin-top: 20px;
      float: left;
      &:nth-child(n+2) {
        margin-left: 20px;
      }
      .care-item{
        cursor: pointer;
        width: 350px;
        // height: 181px;
      }
    }
    .care-header {
    	position: relative;
    	display: flex;
    	align-items: center;
      justify-content: space-between;
    	color: #fff;
    	height: 70px;
    	line-height: 70px;
    	padding: 0 20px;
    	border-top-left-radius: 10px;
    	border-top-right-radius: 10px;
      background-color: #666666;
      button{
        width: 68px;
        height: 23px;
        background: #FFFFFF;
        border-radius: 2px;
        color: #F2AF4D;
        font-size: 13px;
        text-align: center;
        line-height: 23px;
        outline: none;
        border: none;
        cursor: pointer;
      }
    }

    .care-header span {
    	text-align: left;
    	font-size: 20px;
    }

    .colorType0 {
    	background: #15A189;
    }

    .colorType1 {
    	background: #487EEA;
    }

    .colorType2 {
    	background: #F2AF4D;
    }

    .care-room {
    	position: relative;
    	padding: 0 20px;
    	height: 54px;
      font-size: 18px;
      color: #999999;
      &:nth-child(n+2) {
        border-top: 1px solid #D8D8D8;
      }
      .care-cd-color{
        color: #487EEA;
      }
      .care-sm-color{
        color: #F2AF4D;
      }
    }

    .care-room,
    .care-wc {
    	display: flex;
    	align-items: center;
    	justify-content: space-between;
    }

    .care-room>img {
    	width: 48px;
    	transform: rotateZ(270deg);
    	position: absolute;
    	right: -7px;
    	bottom: 0;
    }

    .care-room-name {
    	height: 100%;
    	text-align: center;
      display: flex;
      align-items: center;
      span{
        font-size: 26px;
        color: #333333;
      }
    }

    .care-room-right {
    	padding-left: 15px;
    	position: relative;
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
      span{
        font-size: 26px;
        color: #333333;
      }
    }

    .care-content {
      padding: 0 20px;
    	background-color: #F5F5F5;
    	border-bottom-left-radius: 10px;
    	border-bottom-right-radius: 10px;
    	box-shadow: 0px 3px 6px rgb(0 0 0 / 23%);
    }

    .dialog-main {
      .info-title {
        margin-bottom: 12px;
        font-size: 20px;
        font-weight: 400;
        line-height: 30px;
        color: #2279ff;
      }

      .basicInfo {
        display: grid;
        grid-template-rows: repeat(4, 40px);
        grid-template-columns: 9% 16% 9% 16% 9% 16% 9% 16%;
        margin-bottom: 12px;
        border-bottom: 1px solid #e1e1e1;
        border-left: 1px solid #e1e1e1;

        .item {
          line-height: 40px;
          text-align: center;
          border-top: 1px solid #e1e1e1;
          border-right: 1px solid #e1e1e1;

          &:nth-child(even) {
            font-size: 16px;
            color: #333;
          }

          &:nth-child(odd) {
            font-size: 16px;
            color: #999;
          }
        }

        .item-spcial-1 {
          grid-column-start: 2;
          grid-column-end: 5;
        }

        .item-spcial-2 {
          grid-column-start: 6;
          grid-column-end: 9;
        }
      }

      .healthInfo {
        grid-template-rows: repeat(3, 40px);
      }

      .bedInfo {
        grid-template-rows: repeat(3, 40px);
      }

      .familyInfo {
        grid-template-rows: repeat(2, 40px);
      }
    }
  }
</style>
